<template>
  <div id="anchorDetails">
    <el-dialog
      :title="anchorDetailsInline.dialogTitle"
      :visible.sync="anchorDetailsInline.dialogTableVisible"
    >
      <div style="margin:10px 0 -10px 0">个人主播数据</div>
      <el-table :data="gridData">
        <el-table-column type="selection" fixed="left"> </el-table-column>
        <el-table-column type="index" width="60" align="center" label="序号">
          <template slot-scope="scope">
            {{
              scope.$index
                | filterPage(searchParams.pageNum, searchParams.pageSize)
            }}
          </template>
        </el-table-column>
        <el-table-column
          property="nickName"
          label="用户名"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          property="dpAccount"
          label="大鹏号"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          property="verificationMobile"
          label="验证手机号"
          width="150"
        ></el-table-column>
        <el-table-column
          property="trueName"
          label="真实姓名"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          property="duration"
          label="总开播时长"
          width="150"
          align="center"
        >
         <template slot-scope="scope">
           <div>
             {{scope.row.duration | formateTime() }}
           </div>
         </template>
        </el-table-column>
        <el-table-column
          property="fansCountByUser"
          label="总粉丝数"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          property="watchCountUv"
          label="总观看人数"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          property="likeCount"
          label="总获赞数量"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          property="giftCount"
          label="总收获礼物数"
          width="150"
          fixed="right"
          align="center"
        ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="anchorDetailsInline.dialogTableVisible = false"
          >确 定</el-button
        >
      </span>
      <pageCom
        :searchParams="searchParams"
        :total="total"
        @searchList="searchList"
      ></pageCom>
    </el-dialog>
  </div>
</template>

<script>
import { getAnchorDetail } from '@/api/anchor/anchor-list'
export default {
  props: {
    anchorDetailsInline: {
      default: function() {
        return {
          dialogTableVisible: false,
          dialogTitle: '主播数据',
          dpAccount: ''
        }
      }
    }
  },
  data() {
    return {
      total: 0,
      gridData: [],
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 //
      }
    }
  },
  filters:{
    formateTime(time){
      const h = parseInt(time / 3600)
      const minute = parseInt(time / 60 % 60)
      const second = Math.ceil(time % 60)    
      const hours = h < 10 ? '0' + h : h
      const formatSecond = second > 59 ? 59 : second
      return `${hours > 0 ? `${hours}:` : ''}${minute < 10 ? '0' + minute : minute}:${formatSecond < 10 ? '0' + formatSecond : formatSecond}`
    }
  },
  created() {
    this.searchList()
  },
  mounted() {},
  methods: {
    searchList() {
      let obj = {
        dpAccount: this.anchorDetailsInline.dpAccount,
        orderType: 'ASC',
        sortField: 'DURATION',
        ...this.searchParams
      }
      getAnchorDetail(
        obj,
        (res) => {
          this.gridData = res.rows
          this.total = res.total
        },
        (err) => {}
      )
    }
  }
}
</script>

<style lang="less" scoped>
#anchorDetails {
  :deep(.el-dialog__body) {
    padding: 0 30px 0 20px !important;
  }
}
</style>
